<template>
  <van-popup
    class="pledgePopup"
    v-model:show="props.show"
    round
    z-index="999999"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: 'calc(100vw - 100px)' }"
    @click-overlay="popupClose"
    @click-close-icon="popupClose"
  >
    <div class="pledgePopup-bg items-center">
      <div class="box">
        <div class="box-title">
          {{ $t(props.isPledge ? "pledge.pageTitle" : "pledge.qxzy") }}
        </div>
        <div class="box-title-desc items-center">
          <img
            class="box-title-desc-icon"
            src="/image/assetDetails/desc-logo.svg"
          />
          {{ $t(props.isPledge ? "pledge.zhye" : "pledge.zyye") }}
          <span>{{ toThousands(decimalToLength(balance)) }} BDC</span>
        </div>
        <!-- 输入框 -->
        <van-field
          class="box-input"
          type="number"
          v-model="pageData.input"
          :maxlength="12"
          center
          clearable
          :formatter="inputFormatter"
          label=""
          :placeholder="$t('airdrop.qsr')"
        >
          <template #button>
            <div class="box-input-btn" @click="inputMax">
              {{ t("mvp.exchangePoints.text3") }}
            </div>
          </template>
        </van-field>
        <!-- 提示 -->
        <div class="box-info">
          <div class="box-info-title">
            {{ $t("pledge.sycs") }} {{ sycs }} {{ $t("pledge.cs") }}
          </div>
          <div v-if="isPledge" class="box-info-desc">
            {{ $t("pledge.zydesc") }}
          </div>
          <div v-else class="box-info-desc">{{ $t("pledge.qxzydesc") }}</div>
        </div>
        <!-- 分割线 -->
        <div class="box-fgx"></div>
        <!-- 确认 -->
        <div class="box-footer">
          <div
            class="box-footer-btn"
            :class="{
              'box-footer-btn-disabled':
                Number(sycs) <= 0 ||
                pageData.input.length == 0 ||
                pageData.input === '0',
            }"
            @click.stop="confirm"
          >
            {{ $t("common.confirm") }}
          </div>
        </div>
      </div>
      <!-- 关闭按钮 -->
      <img
        class="box-close"
        src="/image/pledge/close.svg"
        @click="popupClose"
      />
    </div>
  </van-popup>
</template>
<script setup lang="ts" name="pledgePopup">
import { ref, reactive, onMounted, computed } from "vue";
import { stake, unstake } from "@/api/pledge";
import { debounce, toThousands, decimalToLength } from "@/utils";
import * as MITO from "@zhj1214/qdjk-web";

interface PopupInfo {
  freeAmount?: string; // 可用余额
  pledgeAmount?: string; // 质押中金额
  leftStakeCount?: number; // 剩余每日质押次数
  leftUnstakeCount?: number; // 剩余每日取消质押次数
}

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    isPledge: boolean; // 是不是质押
    detail: PopupInfo;
  }>(),
  {
    show: false,
    isPledge: true,
  }
);

const emit = defineEmits(["update:show", "refresh"]);

// 页面属性
const pageData = reactive({
  input: "",
});

// 账户可用/质押中的金额
const balance = computed(() => {
  return Number(
    props.isPledge ? props.detail.freeAmount : props.detail.pledgeAmount
  );
});

const sycs = computed(() => {
  return props.isPledge
    ? props.detail.leftStakeCount || 0
    : props.detail.leftUnstakeCount || 0;
});
onMounted(() => {});

// 关闭弹窗
const popupClose = () => {
  pageData.input = "";
  emit("update:show", false);
};

// 点击了最大
const inputMax = () => {
  pageData.input = (balance.value || 0) + "";
};
// 格式校验
const inputFormatter = (value: any) => {
  // if (/^[0]/g.test(value)) {
  //   return "";
  // } else
  if (value.includes(".") && value.split(".")[1].length > 2) {
    value = decimalToLength(value);
  } else if (value > balance.value) {
    value = balance.value + "";
  }
  return value;
};

// 确认
const confirm = debounce(
  (val: any) => {
    if (!pageData.input) return;
    if (pageData.input === "0") return;
    if (sycs.value < 1) return;
    const api = props.isPledge ? stake : unstake;
    // 1. 使用 loading 遮罩
    showLoadingToast({
      message: `${t("common.requestIng")}...`,
      forbidClick: true,
      duration: 15000,
    });
    try {
      api({
        amount: pageData.input.replace(/\s/g, ""), // 删除字符串中所有的空格
        // loadingManual: true,
      }).then((res) => {
        if (res == 1203) {
          pageData.input = "";
          emit("refresh");
        } else if (res) {
          showToast(t(props.isPledge ? "pledge.zycg" : "pledge.qxzycg"));
          pageData.input = "";
          emit("refresh");
        }
      });
    } catch (error) {
      MITO.log({
        message: `${props.isPledge ? "质押" : "解押"}失败:${error}`,
        tag: "手动上报",
        level: "high",
        ex: "手动上报",
      });
    }
  },
  2000,
  false
);
</script>
<style lang="scss" scoped>
.pledgePopup {
  background-color: transparent;
  &-bg {
    background-color: transparent;
    justify-content: center;
    flex-direction: column;
  }
  .box {
    background-color: #fff;
    padding: 12 * 2px 20 * 2px;
    border-radius: 16 * 2px;
    overflow: hidden;
    &-title {
      padding-top: 10 * 2px;
      padding-bottom: 25 * 2px;
      color: #002853;
      text-align: center;
      font-size: 17 * 2px;
      font-weight: 590;
      &-desc {
        color: #141924;
        font-size: 11 * 2px;
        &-icon {
          margin-right: 4 * 2px;
          width: 7 * 2px;
          height: 7 * 2px;
        }

        span {
          margin-left: 4 * 2px;
          color: #007bff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }
    }
    &-input {
      font-size: 15 * 2px;
      font-weight: 590;
      color: #141924;
      background-color: #f4f5f7;
      border-radius: 24px;
      height: 100px;
      margin: 10 * 2px 0;
      &-btn {
        font-size: 15 * 2px;
        color: #007bff;
        font-weight: 590;
      }
    }
    &-info {
      padding: 10 * 2px;
      border-radius: 12 * 2px;
      background: linear-gradient(180deg, #e4f1ff 0%, #fff 86.67%);
      margin-bottom: 18 * 2px;
      &-title {
        color: #002853;
        font-size: 12 * 2px;
        margin-bottom: 5 * 2px;
      }
      &-desc {
        color: #999da7;
        font-size: 11 * 2px;
      }
    }
    &-fgx {
      position: relative;
      margin-left: -10%;
      background-color: rgba(0, 0, 0, 0.1);
      width: 120%;
      height: 2px;
    }
    &-footer {
      padding-top: 12 * 2px;
      &-btn {
        background-color: #007bff;
        border-radius: 6 * 2px;
        padding: 9 * 2px 0;
        width: 100%;
        font-size: 15 * 2px;
        color: #fff;
        text-align: center;
        font-weight: 590;
        &-disabled {
          background-color: #a0ceff !important;
        }
      }
    }
    &-close {
      margin-top: 25 * 2px;
      width: 30 * 2px;
      height: 30 * 2px;
    }
  }
}
</style>
